$top-blue:#00b7ee;
$bottom-blue:#00b7ee;
@mixin box-type ($w, $h, $bgc:transparent){
    width: $w;
    height: $h;
    background-color: $bgc;
}   
.web {
    margin: 0 auto;
    @include box-type(1000px,1265px);
    // 页面主体部分
 .main{
    position: relative;
    display: flex;
    flex-direction: column;
    @include box-type(1000px,452px ,transparent );
    .rawTitle{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin: 51px 333px 373px 328px;
        @include box-type(339px, 28px,transparent );
        hr.spe-left,.spe-right{
            @include box-type(105px,1px ,gray );
        }
        .title-words{
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;
            @include box-type(86px,28px ,transparent );
            .words-cn{
         background-image: url(../img/p1/我要转让.png);
             @include box-type(84px,14px , transparent  );
            }
            .words-en{
                   background-image: url(../img/p1/WOYAOZHUANRANG.png);
                   background-repeat: no-repeat;
                    @include box-type(86px,14px ,transparent);
                }
               
            }
        }
        .login-id{ 
            position: absolute ;
             top: 141px;
             left: 128px;
              @include box-type(331px,256px ,transparent );
            //   点击登录注册按钮
              .login-btn{
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                margin: 0 108px 0 66px;
                  @include box-type(194px,24px ,transparent );
                  .login-icon{
                      
                      @include box-type(93px,24px ,transparent );
                     input{
                        border-radius: 5px;
                        border: 0;
                        @include box-type(93px,24px ,skyblue );
                    }
                  }
                  .enroll-icon{
                    @include box-type(93px,24px ,transparent );
                    input{
                        border-radius: 5px;
                        border: 0;
                        @include box-type(93px,24px ,#eeeeee ); 
                    }
                  } 
              }
            //   登录区
              .login-area{
                display: flex;
                position: relative;
                justify-content: space-between;
                flex-direction: column;
                  margin: 19px 0 0 0;
                  @include box-type(330px, 116px , transparent);
                //   第一栏用户名
                  .user-name{
                      display: flex;
                      position: absolute;
                      flex-direction: row;
                      justify-content: space-between;
                      align-items: center;
                      top: 0px;
                      @include box-type(330px, 20px, transparent );
                      .yhm{
                          background-image: url(../img/p1/用户名：.png);
                          @include box-type(44px, 13px, transparent);
                      }
                      .user-id{
                          margin: 0 15px 0 8px;
                          @include box-type(265px,20px ,transparent );
                          input{
                              outline-style: none;
                              border: 0;
                              padding: 0;
                            @include box-type(260px,18px ,#ecf5ff);
                          }
                      }
                  }
                //   第二栏密码 
                  .psswd{
                    display: flex;
                    position: absolute;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    top: 48px;
                    @include box-type(330px, 20px, transparent);
                    .mm{
                        background-image: url(../img/p1/密码：.png);
                        @include box-type(31px, 13px, );
                    }
                    .passwd-box{
                        margin: 0 15px 0 20px;
                        @include box-type(265px,20px ,transparent);
                        input{
                            border: 0;
                          @include box-type(261px,18px ,#ecf5ff);
                        }
              }
           
          }
              //   第三栏验证码
                  .vccode{
            display: flex;
            position: absolute;
            flex-direction: row;
            
            align-items: center;
            top: 96px;
            @include box-type(330px, 23px, transparent );
            .yzm{
                background-image: url(../img/p1/验证码：.png);
                margin-right: 7px;
                @include box-type(43px, 13px, transparent);
            }
            .vccode-box{
                margin-right: 4px;
                @include box-type(97px,20px ,transparent );
                input{
                    border: 0;
                    @include box-type(93px,18px ,#ecf5ff); 
                }
        }
            .code-pic{
                background-image: url(../img/p1/QQ截图20151221103301.png);
                margin-right: 6px;
               @include box-type(72px,23px , transparent);
        }
              .rlp{
              @include box-type(101px,13px , transparent);
              p{
                  font-size: 12px;
                  a{
                      text-decoration: none;
                      font-size: 12px;
                      color: #c10000;
                      @include box-type(50px,13px , transparent);
                  }
              }
        }
        
        
              }
             }
            //  第四栏 有效期
             .end-date{
                 position: absolute;
                 display: flex;
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
                 top: 188px;
                 bottom: 55px;
               @include box-type(271px,15px ,  transparent);
               .yxq{
                   background-image: url(../img/p1/有效期：.png);
                   @include box-type(44px,14px , transparent)
               }
               .ddl-time{
                   @include box-type(217px, 13px, transparent);
                   span{
                     font-size: 8px;
                   }
               }
             }
             .login-id-btn{
                 display: flex;
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
                margin: 73px 90px 0 84px;
                 @include box-type(157px, 24px,transparent );
                 .dl-btn{
                     display: flex;
                     @include box-type(93px,24px ,transparent );
                     button{
                         border: 0;
                         border-radius: 5px;
                        @include box-type(93px,24px ,#b3d9ff );
                     }
                 }
                 .forget-passwd{
                     display: flex;
                     @include box-type(57px, 24px,transparent );
                     p{
                         display: flex;
                         text-align: center;
                         @include box-type(57px, 24px,transparent );
                         a{
                             display: flex;
                             font-size: 12px;
                             text-decoration: none;
                             color: #b30000;
                             @include box-type(57px,24px ,transparent );
                         }
                     }
                 }
             }
            
        }
        .pic-right{
            position: absolute;
            top: 141px;
            right: 125px;
            background-image: url(../img/p1/鼎搜让生意做得更容易.png);
            @include box-type(379px, 258px, transparent);
        }
        .box_spe{
            display: flex;
            position: absolute;
            bottom: 0;
            width: 1000px;
            height: 1px;
            background-color: skyblue;
        }
  }

}
// hr.sp3{
//     @include box-type(1000px,1px ,#b6daff )
// }
